<template>
  <div>
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="open" title="合同信息" width="1400" @close="closedDialog">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabchange">
        <el-tab-pane label="基本信息" name="first">
          <information v-if="activeName == 'first'" ref="inFormRef" :echo="props.params.contractId" />
        </el-tab-pane>
        <el-tab-pane label="业务信息" name="second">
          <business v-if="activeName == 'second'" ref="businessRef" :echo="props.params.contractId" />
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="cancal">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import information from "../contract/review/components/information.vue";
import business from "../contract/review/components/business";
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();

const activeName = ref("first");
const inFormRef = ref(null);
const businessRef = ref(null);
const open = ref(true);
const props = defineProps({
  params: {
    type: Object,
  },
});

function getInfo() {
  nextTick(() => {
    inFormRef.value.echo();
  });
}

function tabchange() {
  nextTick(() => {
    if (activeName.value == "first") {
      inFormRef.value.echo();
    } else if (activeName.value == "second") {
      businessRef.value.getList(1);
    }
  });
}

function cancal() {
  open.value = false
}

const emit = defineEmits(["closeDialog"]);
function closedDialog() {
  emit("closeDialog");
}
onMounted(() => {
  getInfo();
});
</script>
